<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['供应链管理','品质管理','不良原因配置']" icon="fa fa-cogs"
			class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>

	<sa-widgets-grid>
		<div class="s_table">
			<div sa-widget [editbutton]="false" color="darken" class="clearfix">
				<header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2>不良原因配置</h2>
				</header>
				<div>
					<div class="widget-body no-padding">
						<div class="page-header clearfix s_table_opreation">
							<div class="left page-header-btn" style="width: calc(100% - 220px);">
								<button class="btn btn-primary" (click)="addShowModal(AdverseCausesModal)" *ngIf="addPermission">添加</button>
							</div>
						</div>
						<div class="table_scroll">
							<div class="table_flex">
								<div class="table_header">
									<span>SMT检测不良原因</span>
									<div class="table_header_btn" >
										<button type="button" *ngIf="sortPermission" (click)="menu_sort(resoureMenuModal, 1)">[排序]</button>
										<button type="button" *ngIf="oneSelected && editPermission" (click)="regionEdit(oneSelected, AdverseCausesModal)">[编辑]</button>
									</div>
								</div>
								<div class="table_content">
									<input type="text" [(ngModel)]="oneKey" (ngModelChange)="tableSearch(1)" class="fliter_search_input" placeholder="请输入名称进行过滤">
									<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table" style="border-top: none;">
										<!-- <thead>
											<tr>
												<th>名称</th>
											</tr>
										</thead> -->
										<tbody>
											<tr *ngFor="let row of oneList; let i = index" [ngClass]="{selected:oneSelected === row.id}" (click)="rowSelectEvent(row, 1)">
												<td>{{row.name}}</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<div class="table_flex">
								<div class="table_header">
									<span>PCBA烧录测试不良原因</span>
									<div class="table_header_btn">
										<button type="button" *ngIf="sortPermission" (click)="menu_sort(resoureMenuModal, 2)">[排序]</button>
										<button type="button" *ngIf="twoSelected && editPermission" (click)="regionEdit(twoSelected, AdverseCausesModal)">[编辑]</button>
									</div>
								</div>
								<div class="table_content">
									<input type="text" [(ngModel)]="twoKey" (ngModelChange)="tableSearch(2)" class="fliter_search_input" placeholder="请输入名称进行过滤">
									<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table" style="border-top: none;">
										<!-- <thead>
											<tr>
												<th>名称</th>
											</tr>
										</thead> -->
										<tbody>
											<tr *ngFor="let row of twoList; let i = index" [ngClass]="{selected:twoSelected === row.id}" (click)="rowSelectEvent(row, 2)">
												<td>{{row.name}}</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<div class="table_flex">
								<div class="table_header">
									<span>主机组装测试不良原因</span>
									<div class="table_header_btn">
										<button type="button" *ngIf="sortPermission" (click)="menu_sort(resoureMenuModal, 3)">[排序]</button>
										<button type="button" *ngIf="threeSelected && editPermission" (click)="regionEdit(threeSelected, AdverseCausesModal)">[编辑]</button>
									</div>
								</div>
								<div class="table_content">
									<input type="text" [(ngModel)]="threeKey" (ngModelChange)="tableSearch(3)" class="fliter_search_input" placeholder="请输入名称进行过滤">
									<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table" style="border-top: none;">
										<!-- <thead>
											<tr>
												<th>名称</th>
											</tr>
										</thead> -->
										<tbody>
											<tr *ngFor="let row of threeList; let i = index" [ngClass]="{selected:threeSelected === row.id}" (click)="rowSelectEvent(row, '3')">
												<td>{{row.name}}</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="table-fix clearfix">
							<button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</sa-widgets-grid>
</div>
<!-- 新增-行政区划   弹窗-->
<section bsModal #AdverseCausesModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
	aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" style="width: 600px;">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title"> {{editState?'编辑--' + typeName : '添加'}}</h4>
			</div>
			<form class="form-horizontal" role="form" novalidate="novalidate">
				<div class="modal-body">
					<div class="row form-horizontal">
						<div class="form-group col-xs-12">
							<label class="control-label col-sm-4 no-padding-right">不良原因类型<sup>*</sup></label>
							<div class="col-sm-8">
								<select class="form-control" name="type" [(ngModel)]="addAdverse.type" [disabled]="editState">
									<option *ngFor="let item of typeOption" [value]="item.value">{{item.text}}</option>
								</select>
							</div>
						</div>
						<div class="form-group col-xs-12">
							<label class="control-label col-sm-4 no-padding-right">不良原因名称<sup>*</sup></label>
							<div class="col-sm-8">
								<input class="form-control" type="text" [(ngModel)]='addAdverse.name' name='name' placeholder="请输入不良原因名称" autocomplete="off" />
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" (click)="addAdverseClose(AdverseCausesModal)">取消</button>
					<button type="button" class="btn btn-primary" (click)="addAdverseSubmit(AdverseCausesModal)">确定</button>
				</div>
			</form>
		</div>
	</div>
</section>
<!-- 新增-行政区划 弹窗end-->

<!--    弹窗 菜单排序-->
<section bsModal #resoureMenuModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" (click)="modalClose(resoureMenuModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>     
				<h4 class="modal-title">{{typeName}}--排序</h4>
			</div>
			<form id="resoureMenuFrom"  class="form-horizontal" role="form" novalidate="novalidate">
				<div class="modal-body" style="max-height: 600px;overflow-y: scroll;">
					<div class="row form-horizontal">
						<div class="col-xs-12">
							<div class="dd" id="nestable">
								<ul class="dd-list" id="nestableList"></ul>
							</div>
						</div>
						<!-- <sa-nestable-list [items]="" [options]="" (change)="menuSelect($event)"></sa-nestable-list>                  -->
										 </div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" (click)="modalClose(resoureMenuModal)">取消</button>
					<button type="button" class="btn btn-primary" (click)="showMenu()">重置</button>
					<button type="button" class="btn btn-primary" (click)="menuControlSubmit(resoureMenuModal)">确认</button>
				</div>
			</form>
		</div>
	</div>
</section>
<!--  弹窗end-->
<style type="text/css">
	.table_scroll {
		display: flex;
		margin-bottom: 60px;
	}
	.table_flex {
		flex: 1;
		height: auto;
		margin-right: 20px;
		border: 1px solid #ddd;
	}
	.table_flex:last-child {
		margin-right: 0;
	}
	.table_header {
		height: 35px;
		border-color: #0C192C!important;
    background: #0C192C;
    color: #fff;
		padding: 0 10px;
		display: flex;
		justify-content: space-between;
		text-align: center;
	}
	.table_header span {
		line-height: 35px;
	}
	.table_header .table_header_btn {
		display: flex;
		text-align: center;
	}
	.table_header button {
		color: #fff;
		margin-left: 15px;
		margin-right: 0;
	}
	.table_content {
		box-sizing: border-box;
		padding: 10px;
		padding-top: 0;
		max-height: 650px;
		overflow: scroll;
		scrollbar-width: none;
	}
	.table_content::-webkit-scrollbar {
		display: none; /* Chrome Safari */
	}
	.fliter_search_input {
		width: 100%;
		height: 35px;
		margin: 10px 0;
		font-size: 14px;
		padding: 5px 8px;
		border: 1px solid #ddd;
	}
</style>